// --------------------- 饼图   ---------------------
function pieChart(pie) {
    let myChart = echarts.init($('.pie')[0]);  // $('.pie')是jQuery对象：加入[0] 转成DOM对象
    let option = {
        // 标题
        title: {
            text: '籍贯 Hometown',
            textStyle: {
                color: '#5d767e'
            }
        },
        // 鼠标移入的提示
        tooltip: {
            // 自定义提示内容
            // {a} series[].name
            // {b} series[].data[].name
            // {c} series[].data[].value
            // {d} 占比
            formatter: '{a}<br>{b} <strong>{c}</strong>人 占比{d}%'
        },
        // 系列数据
        series: [
            {
                name: '各地人员分布',
                type: 'pie', //pie 表示饼图
                radius: ['10%', '60%'],// 半径
                center: ['50%', '50%'],// 中心点坐标
                // roseType 表示扇形区域如何展示数据，可选值有area,radius
                //area 表示使用扇形的半径表示数据的大小，每个扇形的圆心角相同
                // radius 表示使用扇形的半径表示数据的大小,使用圆心角表示占比
                roseType: 'area',
                // itemStyle 表示每一项的样式
                itemStyle: {
                    borderRadius: 8//扇形圆角设置
                },
                // data表示的是数据部分
                data: pie
            }
        ]
    };
    myChart.setOption(option)
}

// --------------------- 折线图 ---------------------
function lineChart(name, salary, truesalary) {
    let myChart = echarts.init($('.line')[0]);
    let option = { // 图例
        legend: {
            top: 20
        },
        // 鼠标移入的提示
        tooltip: {
            // item 表示鼠标放到每一项上才触发
            trigger: 'axis',//触发方式 ， axis表示轴触发，鼠标放到线条上面或下面也可以触发
            // 悬浮框的位置
            position: function (pt) {
                // pt = [鼠标x轴位置，鼠标y轴位置]
                return [pt[0], '15%']// 悬浮框左右方向跟随鼠标移动，上下方向始终不变（始终距离顶部15%）
            }
        },

        // 标题
        title: {
            text: '薪资 Salary',
            textStyle: {
                color: '#6d767e'
            }
        },
        xAxis: {
            type: 'category',
            // 坐标轴留白策略
            boundaryGap: false,//true 表示留白，false表示不留白
            // data: date
            data: name,
        },
        yAxis: {
            type: 'value',
            // 坐标轴留白策略
            // 数组，表示数据的延伸
            // y轴数据最大值 === 最大值+数组最大值*延伸比例
            // y轴数据最大值 === 17000 + 17000 *50% ===25500
            boundaryGap: [0, '50%']
        },
        // 数据缩放组件
        // 数据缩放组件，有三种类型
        // type:select 通过工具箱来缩放
        // type:inside 会把数据缩放组件内知道x轴上,通过鼠标滚轮缩放
        // type:slider(默认值) 会有一个单独的拖动条
        dataZoom: [
            {
                // type: 'slider',
                // type: 'inside',//底下有滚动条 鼠标滚轮可以控制大小
                start: 0,//start和end都是百分比
                end: 100
            }
        ],
        // 系列数据
        series: [
            {
                name: '期望薪资',
                type: 'line',
                symbol: 'none',//设置线条上没有任何点，也可以设置空心圆，实心圆
                sampling: 'lttb',
                smooth: true,//使用平滑曲线
                itemStyle: {
                    color: 'rgb(255, 70, 131)'
                },
                data: salary
            },
            {
                name: '实际薪资',
                type: 'line',
                symbol: 'none',
                sampling: 'lttb',
                smooth: true,
                itemStyle: {
                    color: 'rgb(255, 200, 31)'
                },
                data: truesalary
            }
        ]
    };
    myChart.setOption(option);
}

// --------------------- 柱状图 ---------------------
// let 形参 = 实参
// let { avgScore, group, gt60, gt80, lt60 } = data
function barChart({ avgScore, group, gt60, gt80, lt60 }) {
    let myChart = echarts.init($('.barChart')[0]);
    let option = {
        tooltip: {
            trigger: 'axis', //轴触发，可选 item
            axisPointer: {  //坐标轴指示器
                type: 'cross',  // 横着的一条虚线
                crossStyle: {
                    color: '#999'
                }
            }
        },
        // 右上角的工具箱
        // toolbox: {
        //   feature: {
        //     dataView: { show: true, readOnly: false },
        //     magicType: { show: true, type: ['line', 'bar'] },
        //     restore: { show: true },
        //     saveAsImage: { show: true }
        //   }
        // },
        // 网格
        grid: {
            top: 30,
            right: '7%',
            bottom: 30,
            left: '7%',
        },
        // 图例
        legend: {
            // data: ['Evaporation', 'Precipitation', 'Temperature']
        },
        xAxis: [
            {
                type: 'category',
                data: group,
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                // name: '分数',
                min: 0,
                // offset:80,更改位置
                max: 100,
                interval: 10,//步长
                axisLabel: {
                    formatter: '{value} 分'
                }
            },
            {
                type: 'value',
                // name: '人数',
                min: 0,
                max: 10,
                interval: 1,//步长
                axisLabel: {
                    formatter: '{value} 人'
                }
            }
        ],
        series: [
            {
                name: '平均分',
                type: 'bar',
                barWidth: 15,
                data: avgScore
            },
            {
                name: '低于60分人数',
                type: 'bar',
                barWidth: 15,
                yAxisIndex: 1,//y轴的索引 1代表用第2个y轴
                data: lt60
            },
            {
                name: '60到80分人数',
                type: 'bar',
                barWidth: 15,
                yAxisIndex: 1,
                data: gt60
            },
            {
                name: '高于80分人数',
                type: 'bar',
                barWidth: 15,
                yAxisIndex: 1,
                data: gt80
            }
        ]
    };
    myChart.setOption(option);
}

// --------------------- 地图   ---------------------
function mapChart(chinaDatas, chinaGeoCoordMap) {
    let myChart = echarts.init($('.map')[0]);

    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = chinaGeoCoordMap[dataItem[0].name];
            var toCoord = [116.4551, 40.2539];
            if (fromCoord && toCoord) {
                res.push([{
                    coord: fromCoord,
                    value: dataItem[0].value
                }, {
                    coord: toCoord,
                }]);
            }
        }
        return res;
    };
    var series = [];
    [['北京市', chinaDatas]].forEach(function (item, i) {
        console.log(item)
        series.push({
            type: 'lines',
            zlevel: 6,
            effect: {
                show: true,
                period: 4, //箭头指向速度，值越小速度越快
                trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: 'arrow', //箭头图标
                // symbol: 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5C17.6,3.5,6.8,14.4,6.8,27.6c0,13.3,10.8,24.1,24.101,24.1C44.2,51.7,55,40.9,55,27.6C54.9,14.4,44.1,3.5,30.9,3.5z M36.9,35.8c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H36c0.5,0,0.9,0.4,0.9,1V35.8z M27.8,35.8 c0,0.601-0.4,1-0.9,1h-1.3c-0.5,0-0.9-0.399-0.9-1V19.5c0-0.6,0.4-1,0.9-1H27c0.5,0,0.9,0.4,0.9,1L27.8,35.8L27.8,35.8z',
                symbolSize: 6, //图标大小
            },
            lineStyle: {
                normal: {
                    width: 1, //尾迹线条宽度
                    opacity: 1, //尾迹线条透明度
                    curveness: .3 //尾迹线条曲直度
                }
            },
            data: convertData(item[1])
        }, {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 2,
            rippleEffect: { //涟漪特效
                period: 4, //动画时间，值越小速度越快
                brushType: 'stroke', //波纹绘制方式 stroke, fill
                scale: 4 //波纹圆环最大限制，值越大波纹越大
            },
            label: {
                normal: {
                    show: true,
                    position: 'right', //显示位置
                    offset: [5, 0], //偏移设置
                    formatter: function (params) {//圆环显示文字
                        return params.data.name;
                    },
                    fontSize: 13
                },
                emphasis: {
                    show: true
                }
            },
            symbol: 'circle',
            symbolSize: function (val) {
                return 5 + val[2] * 5; //圆环大小
            },
            itemStyle: {
                normal: {
                    show: false,
                    color: '#f00'
                }
            },
            data: item[1].map(function (dataItem) {
                return {
                    name: dataItem[0].name,
                    value: chinaGeoCoordMap[dataItem[0].name].concat([dataItem[0].value])
                };
            }),
        },
            //被攻击点
            {
                type: 'scatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                rippleEffect: {
                    period: 4,
                    brushType: 'stroke',
                    scale: 4
                },
                label: {
                    normal: {
                        show: true,
                        position: 'right',
                        //offset:[5, 0],
                        color: '#0f0',
                        formatter: '{b}',
                        textStyle: {
                            color: "blue",
                            fontSize: 23,
                        }
                    },
                    emphasis: {
                        show: true,
                        color: "#f60",
                    }
                },
                symbol: 'pin',
                symbolSize: 50,
                data: [{
                    name: item[0],
                    value: chinaGeoCoordMap[item[0]].concat([10]),
                }],
            }
        );
    });

    let option = {
        title: {
            text: '来京路线 From',
            textStyle: {
                color: '#6d767e'
            }
        },
        tooltip: {
            trigger: 'item',
            backgroundColor: 'rgba(166, 200, 76, 0.82)',
            borderColor: '#FFFFCC',
            showDelay: 0,
            hideDelay: 0,
            enterable: true,
            transitionDuration: 0,
            extraCssText: 'z-index:100',
            formatter: function (params, ticket, callback) {
                //根据业务自己拓展要显示的内容
                var res = "";
                var name = params.name;
                var value = params.value[params.seriesIndex + 1];
                res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
                return res;
            }
        },
        // backgroundColor: "#013954",
        backgroundColor: "#fff",

        // 视觉映射组件
        visualMap: { //图例值控制
            show: false,//不让组件显示
            min: 0,
            max: 1,
            calculable: true,
            // show: true,
            color: ['#f44336', '#fc9700', '#ffde00', '#ffde00', '#00eaff'],
            textStyle: {
                color: '#fff'
            }
        },
        geo: {
            map: 'china',
            zoom: 1.2,
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true, //是否允许缩放
            itemStyle: {
                normal: {
                    color: 'rgba(151, 169, 189, .3)', //地图背景色
                    borderColor: '#516a89', //省市边界线00fcff 516a89
                    borderWidth: 1
                },
                emphasis: {
                    color: 'rgba(37, 43, 61, .5)' //悬浮背景
                }
            }
        },
        series: series
    };
    myChart.setOption(option);
}


// ==================================================================
// ========================== Ajax获取数据 ==========================
// ==================================================================

// 1.发送请求.获取班级概况数据
axios.get('/student/overview').then(function ({ data: res }) {
    if (res.code === 0) {
        $('.total').text(res.data.total);
        $('.avgSalary').text(res.data.avgSalary);
        $('.avgAge').text(res.data.avgAge);
        $('.proportion').text(res.data.proportion);
    }
})

// 2.柱状图
// 2.1 点击 ‘三个点’，切换下拉菜单
$('.bar .btn').on('click', function () {
    //  $(this)表示 "三个点"
    //  $(this).next表示下一个兄弟，就是下拉菜单
    $(this).next().toggle();// toggle()自动检测元素是显示还是隐藏 ：如果元素是显示的则让其隐藏： 如果元素是隐藏的则让其显示
})

// 2.2 点击li 获取对应的成绩，拿到成绩后，传入到柱状图中使用
$('#batch li').on('click', function () {
    let index = $(this).index() + 1;//获取当前li的索引 （li元素在兄弟之间的位置) 
    // 能得到0，1，2，3，4   所以+1 得到考试的次数
    // 发送请求 获取柱状图
    axios.get('/score/batch', { params: { batch: index } }).then(({ data: res }) => {
        if (res.code === 0) {
            barChart(res.data)
        }
    })
})
// 2.3 页面刷新后 --> 点击第一个li-->得到第一次成绩
$('#batch > li').eq(0).trigger('click');// trigger 是jQuery方法专门用于触发元素的事件



// 3.获取全部学员信息（从中提取 折线图,饼图和地图所需的数据）
axios.get('/student/list').then(({ data: res }) => {
    let { code, data } = res;
    if (code === 0) {
        // 整理出 折线图,饼图和地图所需的数据
        // console.log(data);

        // 调用lineChart, pieChart, mapChart, 传入数据
        // 折线图
        let name = [];
        let salary = [];
        let truesalary = [];

        // 饼图
        let pie = [] // [{name:'省',value:人数},{name:'省',value:人数}...]

        // 地图
        let chinaGeoCoordMap = { '北京市': [116.4551, 40.2539] };
        let chinaDatas = [];
        data.forEach(item => {
            // ---------------------处理折线图所需数据---------------------
            name.push(item.name);
            salary.push(item.salary);
            truesalary.push(item.truesalary);

            // ---------------------处理饼图所需数据---------------------
            let i = pie.findIndex(v => v.name === item.province)

            // ---------------------处理地图所需数据---------------------
            chinaGeoCoordMap[item.province] = [item.jing, item.wei];
            let k = chinaDatas.findIndex(v => v[0].name === item.province)

            // 向地图和饼图添加数据
            if (i > -1) {
                pie[i].value++;
                // chinaDatas[k][0].value++;
            } else {
                pie.push({ name: item.province, value: 1 })
                // chinaDatas.push([{ name: item.province, value: 1 }])
            }

            if (k > -1) {
                chinaDatas[k][0].value++;
            } else {
                chinaDatas.push([{ name: item.province, value: 1 }])
            }
        })
        pieChart(pie)
        lineChart(name, salary, truesalary)
        mapChart(chinaDatas, chinaGeoCoordMap)
    }
})


